<template>
  <view class="upload-file">
    <view class="media-list">
      <view class="media-wrap" v-for="(item, index) in files" :key="index">
        <template>
          <image class="img" :src="item.url" @click="previewImg(item)"></image>
        </template>
        <span v-if="operable" class="del-btn" @click="delMedia(index)">×</span>
      </view>
      <view class="upload-btn" v-if="operable" @click="chooseImage">
        <image class="icon" src="@/static/camera.png"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    files: {
      type: Array,
      default: () => [],
    },
    operable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      baseUrl: '',
      previewImgs: [],
      token: null,
    }
  },
  created() {
    this.token = uni.getStorageSync('sgkj_token')
    this.baseUrl = this.vuex_config.baseUrl
    
  },
  methods: {
    delMedia(index) {
      this.files.splice(index, 1)
    },
    previewImg(item) {
      // 图片预览
      let imgsArray = []
      imgsArray[0] =  this.vuex_config.baseUrl + item.fileUrl
      uni.previewImage({
        current: 0,
        urls: imgsArray,
      })
      // this.previewImgs = [url]
      // #ifdef MP-WEIXIN
      // this.$nextTick(() => {
      //   this.$refs.previewImage.open(url) // 传入当前选中的图片地址(小程序必须添加$nextTick，解决组件首次加载无图)
      // })
      // #endif

      // #ifndef MP-WEIXIN
      // this.$refs.previewImage.open(url) // 传入当前选中的图片地址
      // #endif

      /* uni.previewImage ios 黑屏
      console.log(url)
      const arr = [url]
      uni.previewImage({
        current: arr[0],
        urls: arr
      }); */
    },
    handleUploadClick() {
      this.chooseImage()
    },
    // closeMediaPopup() {
    //   this.$refs.mediaPopup.close()
    // },
    chooseImage() {
      // this.closeMediaPopup()
      uni.chooseImage({
        count: 1, // 选择一张图片
        sizeType: ['original', 'compressed'], // 原图或压缩图
        sourceType: ['album', 'camera'], // 相册或相机
        success: (res) => {
          const tempFile = res.tempFiles[0]
          console.log('tempFile：', tempFile)
          const fileName = tempFile.name
          console.log('fileName：', fileName)
          console.log(typeof fileName)
          const filePath = res.tempFilePaths[0]
          console.log('filePath：', filePath)
          if (fileName) {
            if (
              fileName.endsWith('.jpg') ||
              fileName.endsWith('.png') ||
              fileName.endsWith('.jpeg')
            ) {
              this.startUploadFile(filePath)
            } else {
              uni.showToast({
                title: '只支持 jpg,png,jpeg格式的图片',
                icon: 'none',
                duration: 2000,
              })
            }
          } else {
            this.startUploadFile(filePath)
          }
        },
      })
    },
    startUploadFile(filePath) {
      let url
      // #ifdef APP-PLUS
      url = this.baseUrl + '/common/upload'
      // #endif
      // #ifdef H5
      url = this.baseUrl + '/common/upload'
      // #endif
      console.log('开始上传！！！')
      uni.showLoading({
        title: '加载中',
      })
      uni.uploadFile({
        url,
        filePath,
        name: 'file',
        header: {
          authorization: this.token,
        },
        success: (res) => {
          const data = JSON.parse(res.data)
          console.log(data, '????data')
          this.files.push(data)
        },
        fail: (err) => {
          console.log(err)
        },
        complete: () => {
          uni.hideLoading()
        },
      })
    },
  },
  // mounted() {
  //   // TODO 确认生产域名
  //   this.baseUrl = this.$baseUrl
  //   // this.platform = uni.getSystemInfoSync().platform;
  // },
}
</script>

<style lang="less" scoped>
.media-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex: 1;

  .media-wrap {
    position: relative;
    margin: 0 16rpx 16rpx 0;

    .img,
    .video {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      border: 2rpx solid #eee;
      box-sizing: border-box;
    }

    .del-btn {
      position: absolute;
      top: 0;
      right: 0;
      display: inline-block;
      width: 40rpx;
      height: 40rpx;
      text-align: center;
      line-height: 40rpx;
      background: #ffbcbc;
      border-radius: 4rpx;
    }
  }
}

.upload-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160rpx;
  height: 160rpx;
  border: 1px dashed #dcdfe6;
  border-radius: 8rpx;

  .icon {
    width: 40rpx;
    height: 36rpx;
  }
}
.media-type-list {
  background: #fff;

  .media-type {
    padding: 30rpx 0;
    width: 100%;
    text-align: center;
  }
}

.preview-video {
  z-index: 9999;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  .video {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    width: 100%;
    height: 50%;
  }
  .close-btn {
    width: 50%;
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate3d(-50%, 0, 0);
    text-align: center;
  }
}
</style>